<style>
    .container{
		width: 100vw;
		height: 100vh;
	}
	.video{
		width: 100vw;
		height: 30vh;
	}
	video{
		width: 100vw;
		height: 30vh;
	}
    
	.tab{
		display: flex;
		justify-content: space-between;
		color: #858487;
		box-shadow: 0rpx 3rpx 8rpx 5rpx #f9f9f9;
        padding:25upx 30upx 0upx 30upx;
		font-size: 30rpx;
        
	}
    .tab text{
        padding:15upx 10upx;
   
    }
    .tab .clickText{
             border-bottom:1px solid #ccc;
    }
	.title{
		padding: 30rpx 0rpx;
		margin: 0rpx 30rpx;
		background-color: white;
		margin-top: 10rpx;
		border-bottom: 1rpx solid #f1f1f1;
		
	}
	.title view:nth-of-type(1){
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.title view:nth-of-type(2){
		font-size: 28rpx;
		color: #808080;
	}
	.title view:nth-of-type(2) text{
		margin:0rpx 10rpx 0rpx 20rpx;
		display: inline-block;
		margin-top: 10rpx;
	}
	.lessons{
		padding: 30rpx;
	}
	.lessons_title{
		font-size: 33rpx;
		font-weight: 700;
		padding: 20rpx 0rpx;
	}
	.lessons_content{
		font-size: 30rpx;
		color: #444444;
	}
	.lessons_content view{
		padding: 10rpx 0rpx;
	}
	.icon-daima{
		margin: 0rpx 20rpx;
	}
</style>
<template>
    <view class="container">
        <view class="video">
            <video id='' :show-mute-btn="show_mute_btn" :enable-play-gesture="enable_play_gesture"
                :show-center-play-btn="show_center_play_btn" :page-gesture="page_gesture" :src="videoURL" controls></video>
        </view>
        <view class="content">
            <view class="tab">
                <text :class="current===0?'clickText':''" @click="tagChange(0)">详情</text>
                <text :class="current===1?'clickText':''" @click="tagChange(1)">章节</text>
                <text :class="current===2?'clickText':''" @click="tagChange(2)">评论</text>
            </view>
            <view class="uni-padding-wrap">
                <swiper class="swiper" style='height:600upx' ref='swiper' @change='swiperChange' :current='current'
                    :autoplay="autoplay" :interval="interval" :duration="duration">
                    <swiper-item>
                        <view class="swiper-item uni-bg-green">
                            <view class="title">
                                <view class="">{{detail.title||'&nbsp'}}</view>
                            </view>
                        </view>
                        <view class="icon">{{detail.intro||'&nbsp'}} </view>
                    </swiper-item>
                    <swiper-item>
                        <view>
                            <view class="lessons">
                                <view class="lessons_item" v-for="it in list" @click="videoChange(it)">
                                    <view class="lessons_title">
                                        {{it.title}}
                                    </view>
                                    <view class="lessons_content">
                                        <text type="" class="icon-daima"></text> {{it.content}}
                                    </view>
                                </view>
                                <view class="lessons_item" v-if="false">
                                    <view class="lessons_title">
                                        第2章 安装Python
                                    </view>
                                    <view class="lessons_content">
                                        <view class=""><text type="" class="icon-daima"></text> 2-1
                                            选择Python版本(00:51)</view>
                                        <view class=""><text type="" class="icon-daima"></text> 2-2
                                            Windows上安装Python (04:16)</view>
                                        <view class=""><text type="" class="icon-daima"></text> 2-3 第一个Python程序
                                            (04:16)</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>

                    <swiper-item>
                        <view class="swiper-item uni-bg-blue">C</view>
                    </swiper-item>
                </swiper>

            </view>



        </view>
    </view>
</template>

<script>
    export default {
        data() {
            const detail = {};
            const videoURL =
                'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v';
            return {
                videoURL,
                detail,
                list: [],
                current: 0,
                page_gesture: true,
                show_center_play_btn: false,
                enable_play_gesture: true,
                show_mute_btn: true
            }
        },
        created() {
            this.getDataList();
        },
        methods: {
            tagChange(current) {
                this.current = current;
            },
            swiperChange(e) {
                const current = e.detail.current;
                this.current = current;
            },
            videoChange(item) {
                this.videoURL = item.dataurl;
            },
            getDataList() {
                uni.request({
                    url: 'http://103.214.170.191:8089/wechat/course_detail', //仅为示例，并非真实接口地址。
                    data: {
                        id: 1
                    },
                    header: {
                        'custom-header': 'hello' //自定义请求头信息
                    },
                    success: (res) => {
                        if (res.data.data) {
                            this.detail = res.data.data.detail;
                            this.list = res.data.data.chapter || [];
                        }
                        console.log(res.data);
                        // this.text = 'request success';
                    }
                });
            }
        }
    }
</script>
